<template>
  <div class="work-calendar">
    <h3>{{ $t('dashboard.workclander') }}</h3>
    <!-- 年 月 -->
    <div class="yORm">
      <!-- 年 -->
      <el-select v-model="year" @change="change">
        <el-option
          v-for="item in yearArr"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <!-- 月 -->
      <el-select v-model="month" @change="change">
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <el-calendar v-model="nowDate">
      <template slot="dateCell" slot-scope="{ date }">
        <span class="day">{{ date | getDay }}</span>
        <span v-if="showXiu(date)" class="xiu">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  // localDate:接收外界传入的日期(可传，可不传)
  props: {
    localDate: {
      type: Date, // 约定传入的类型为日期
      default: function () {
        return new Date()
      }
    }
  },
  filters: {
    // 得到完整的日期的日
    getDay (value) {
      // 将 value 转为时间对象
      let _time = new Date(value)
      // 得到每月的日
      return _time.getDate()
    }
  },
  watch: {
    localDate: {
      handler: function (newv) {
        // 将日期转为时间
        var _time = new Date(newv)
        // 将当前日期赋值给
        this.nowDate = _time
        // 得到年
        this.year = _time.getFullYear()
        // 得到月
        this.month = _time.getMonth() + 1
        // 得到年份的数组
        this.getYearArr()
      },
      immediate: true
    }
  },
  data () {
    return {
      yearArr: [], // 年份的数组
      year: '', // 年
      month: '', // 月
      // 当前选中的时间
      nowDate: ''
    }
  },
  methods: {
    // 修改日期（年,月）
    change () {
      // 一旦修改了年 & 月之后， 我们需要重新给日历组件设置一个时间
      // 得到当前时间
      const _time = new Date()
      // 得到当前年
      const _year = _time.getFullYear()
      // 得到当前月
      const _month = _time.getMonth() + 1
      // 判断：如果调整的年月不是本月，就默认显示选中 1 日
      //       如果调整的年月是本月，就默认选中当日
      if (this.year === _year && this.month === _month) {
        this.nowDate = _time
      } else {
        // 不是本月
        this.nowDate = new Date(`${this.year}/${this.month}/01`)
      }
    },
    getYearArr () {
      // 年份的数组，在当前年份的基础向前加5年，向后加5年
      var _min = this.year - 5
      var _max = this.year + 5
      // 添加年份
      for (let i = _min; i <= _max; i++) {
        this.yearArr.push(i)
      }
    },
    // 是否显示休文本
    showXiu (date) {
      // 将 date 转为日期
      const _time = new Date(date)
      // 得到日期的年
      const _year = _time.getFullYear()
      // 得到日期的月
      const _month = _time.getMonth() + 1
      // 再得到 date 是一周中的第几天
      const day = _time.getDay() // 日 => 0 一：1 二：2：三：3... 六：6
      // 判断日期必须是当月
      if (this.year === _year && this.month === _month) {
        // 判断天数，如果是周期，返回 true
        if (day === 0 || day === 6) {
          return true
        }
      }
    },
    fn (date) {
      console.log(date)
    }
  }
}
</script>

<style lang="scss">
.work-calendar {
  h3 {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .el-calendar__header {
    display: none;
  }
  .yORm {
    text-align: right;
    .el-select {
      width: 100px;
    }
    input.el-input__inner {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
    }
    i.el-select__caret.el-input__icon.el-icon-arrow-up {
      line-height: 30px;
    }
  }
  .el-calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  td.current,
  td.prev,
  td.next {
    border: none !important;
  }
  .el-calendar-table {
    thead {
      th {
        font-weight: 700;
      }
      th:nth-child(6),
      th:nth-child(7) {
        color: #fa7c4d;
      }
    }
  }
  .xiu {
    background-color: #fa7c4d;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin-left: 6px;
  }
  .is-today {
    .day {
      background-color: #409eff;
      color: #fff;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      border-radius: 50%;
      font-size: 12px;
    }
  }
}
</style>
